<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/echarts.js"></script>
    <script src="js/hookEcharts.js"></script>
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="css/dase.css">
    <link rel="stylesheet" href="fonts/iconfont.css">
</head>

<body>
    <div class="main">
        <div class="topnav">
            <div class="nav-left">智慧园区可视化平台</div>
            <ul class="nav-middle">
                <li>
                    <a href="#">营区态势</a>
                </li>
                <li>
                    <a href="#">出入管理</a>
                </li>
                <li>
                    <a href="#">监控点位</a>
                </li>
                <li>
                    <a href="#">能耗管理</a>
                </li>
                <li>
                    <a href="#">配置中心</a>
                </li>
            </ul>
            <div class="nav-right">
                <div class="kaiguan">
                    <span class="iconfont icon-kaiguan"></span>
                </div>
                <div class="yonghu">
                    <ul>
                        <li>
                            <span class="iconfont icon-yonghu"></span>
                            <span> <a href="#">Admin</a> </span>
                        </li>
                    </ul>
                </div>
                <div class="time">2022-5-20 20:05</div>
            </div>
        </div>
        <div class="content">
            <div class="con-left">
                <div class="l-top">
                    <div class="l-top-left">
                        <em>当日能耗</em>
                        <p>kwh</p>
                    </div>
                    <div class="l-top-wrap">
                        <div class="num1">
                            <span>4</span>
                        </div>
                        <div class="num2">
                            <span>8</span>
                        </div>
                        <div class="num3">
                            <span>7</span>
                        </div>
                        <div class="num4">
                            <span>3</span>
                        </div>
                        <div class="num5">
                            <span>5</span>
                        </div>
                        <script>
                            var num5 = document.querySelector('.num5');
                            var num = 5;
                            // 定时器 间歇定时器
                            setInterval(function() {
                                var spanOld = document.querySelectorAll('.num5 span');
                                if (spanOld.length > 1) {
                                    // 移除节点
                                    spanOld[0].remove();
                                }
                                num++;
                                if (num > 9) {
                                    num = 0;
                                }

                                // 增加span的元素
                                var addSpan = document.createElement('span');
                                addSpan.innerText = num;
                                // 增加到页面上
                                num5.appendChild(addSpan);
                                // 获取所有的span元素
                                var spans = document.querySelectorAll('.num5 span');
                                spans[0].style.animation = 'moveNum2 1s forwards';
                                spans[1].style.animation = 'moveNum1 1s forwards';

                            }, 2000)
                        </script>
                    </div>
                    <img src="./images/1.png" width="525" height="155" alt="">
                </div>
                <div class="l-middle">
                    <div class="mid-top">
                        <p>小时用能变化</p>
                        <em>
                            <div class="box1">电</div>
                            <div class="box2">水</div>
                        </em>
                    </div>
                    <div id="mid-bot" style="width: 495px;height:225px;"></div>
                    <script type="text/javascript">
                        console.log(window);
                        // 基于准备好的dom，初始化echarts实例
                        var myChart = echarts.init(document.getElementById('mid-bot'));

                        // 指定图表的配置项和数据
                        var option = {
                            // color: "#fff",
                            xAxis: {
                                // 值
                                type: 'category',
                                data: [0, 2, 4, 6, 8, 10, 12, 14, 16, 18, 20, 22, 24],
                                axisTick: {
                                    show: false
                                },
                                axisLine: {
                                    lineStyle: {
                                        color: ['#fff'],
                                    }
                                },
                            },
                            yAxis: {
                                // 类目
                                type: 'value',
                                splitLine: {
                                    lineStyle: {
                                        type: 'dashed'
                                    }
                                },
                                nameTextStyle: {
                                    color: '#fff'
                                }
                            },
                            legend: {
                                data: ['今日能耗'],
                                right: 100
                            },
                            series: [{
                                name: '今日能耗',
                                data: [6, 160, 48, 45, 50, 250, 200, 180, 230, 70, 180, 55, 0],
                                type: 'line',
                                // type: 'bar',
                                // 平滑的折线图
                                smooth: true,
                                // 拐点的样式
                                symbol: 'circle',
                                // 折线图中拐点的大小
                                symbolSize: 5,
                                // 拐点的颜色
                                itemStyle: {
                                    color: '#04E38A',
                                },
                                // 折线的颜色
                                lineStyle: {
                                    color: '#04E38A'
                                }
                            }]
                        };

                        // 使用刚指定的配置项和数据显示图表。
                        myChart.setOption(option);
                    </script>
                </div>
                <div class="l-bottom">
                    <div class="mid-top">
                        <p>日用能趋势</p>
                        <em>
                            <div class="box1">电</div>
                            <div class="box2">水</div>
                        </em>
                    </div>
                    <div id="bot-bot" style="width: 495px;height:225px;"></div>
                    <script type="text/javascript">
                        console.log(window);
                        // 基于准备好的dom，初始化echarts实例
                        var myChart = echarts.init(document.getElementById('bot-bot'));

                        // 指定图表的配置项和数据
                        var option = {
                            // color: "#fff",
                            xAxis: {
                                // 值
                                type: 'category',
                                data: [5.10, 5.11, 5.12, 5.13, 5.14, 5.15, 5.16, 5.17, 5.18],
                                axisTick: {
                                    show: false
                                },
                                axisLine: {
                                    lineStyle: {
                                        color: ['#fff'],
                                    }
                                },
                            },
                            yAxis: {
                                // 类目
                                type: 'value',
                                splitLine: {
                                    lineStyle: {
                                        type: 'dashed'
                                    }
                                },
                                nameTextStyle: {
                                    color: '#fff'
                                }
                            },
                            // legend: {
                            //     data: ['今日能耗'],
                            //     right: 100
                            // },
                            series: [{
                                // name: '今日能耗',
                                data: [56, 20, 33, 40, 21, 60, 60, 45, 60],
                                type: 'bar',
                                // type: 'bar',
                                // 平滑的折线图
                                // smooth: true,
                                // 拐点的样式
                                // symbol: 'circle',
                                // 折线图中拐点的大小
                                // symbolSize: 5,
                                // 拐点的颜色
                                // itemStyle: {
                                //     color: '#04E38A',
                                // },
                                // 折线的颜色
                                // lineStyle: {
                                //     color: '#04E38A'
                                // }
                                itemStyle: {
                                    color: '#04E38A'
                                }
                            }]
                        };

                        // 使用刚指定的配置项和数据显示图表。
                        myChart.setOption(option);
                    </script>
                </div>
            </div>
            <div class="con-right">
                <div class="r-top">
                    <div class="three1"></div>
                    <div class="three2"></div>
                    <div class="three3"></div>
                </div>
                <div class="r-middle"></div>
                <div class="r-bottom"></div>
            </div>
        </div>
    </div>
</body>

</html>